<template>
  <div class="singleOperateHeader">
    <span class="headerCancel" @click="goBack">返回</span>
    <span>{{title}}</span>
  </div>
</template>

<script>
import { useRoute } from "vue-router"
import { $routerBack } from "@/utils/customRouter"

export default {
  name: 'SingleOperateHeader',
  props: {
    title: {
      type: String,
      default: '',
    },
  },
  setup() {

    const $route = useRoute();

    //返回上一页
    const goBack = () => {
      $routerBack({
        $route,
      });
    }

    return {
      goBack,
    }
  }
}
</script>

<style lang="less" scoped>
.singleOperateHeader {
  position: relative;
  text-align: center;
  border-bottom: #E5E5E5 solid 1px;
  height: 52px;
  line-height: 52px;
  color: #000000;
  font-weight: bold;
  .headerCancel {
    position: absolute;
    left: 24px;
    top: 12px;
    width: 68px;
    height: 28px;
    line-height: 28px;
    font-size: 12px;
    padding-left: 28px;
    text-align: left;
    border: #D8D8D8 solid 1px;
    border-radius: 4px;
    font-weight: normal;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.65);
    background-image: url("~@/assets/svg/insuredManagement/cancelImg.svg");
    background-position: 8px center;
    background-repeat: no-repeat;
  }
}
</style>